<template>
  <section class="component anti-fraud-result">
    <el-form :model="queryModel" ref="form" label-width="120px">

      <el-form-item label="调查结果" prop="result">
        <el-select v-model="queryModel.result" placeholder="请选择" clearable>
          <el-option v-for="{index,name,code} in $dict.getDictData('SurveyResults')" :key="index" :label="name" :value="code"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="欺诈类型" prop="type" v-if="queryModel.result === 'Fraud'">
        <el-select v-model="queryModel.type" placeholder="请选择" clearable @change="selectSubType">
          <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select v-model="queryModel.subType" placeholder="请选择" clearable v-if="subType.length !== 0">
          <el-option v-for="item in subType" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="调查原因" prop="remark">
        <el-input v-model="queryModel.remark" type="textarea" :maxlength="300" show-word-limit></el-input>
      </el-form-item>

      <el-form-item label="上传附件">
        <file-upload ref="upload_case_import" :fileList.sync="fileList" :AllowExtension="['xlsx','xls','jpg','png']"></file-upload>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="commit">确定</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { State } from 'vuex-class';
import FileUpload from '~/components/common/file-upload.vue';
import { CaseAssistAntiFraudSurveyCaseService } from '~/services/domain-service/case-assist-anti-fraud-survey-case.service.ts';

@Component({
  components: {
    FileUpload,
  },
})
export default class AntiFraudResult extends Vue {
  @Prop({ required: true })
  private caseRow: any;

  @Dependencies(CaseAssistAntiFraudSurveyCaseService)
  private caseAssistAntiFraudSurveyCaseService: CaseAssistAntiFraudSurveyCaseService;
  // 用户自定义数据字典
  @State private customDataDict;

  private queryModel: any = {
    result: '',
    type: '',
    subType: '',
    remark: '',
    recordFiledIds: '',
  };
  private recordFiledIds: string;
  private type: any[] = [];//欺诈类型
  private subType: any[] = []; //二级欺诈类型
  private fileList: any[] = []; //文件上传
  private categoryName: string;
  public refresh() {
    //   重置form表单xr
    const addForm: any = this.$refs['form'];
    addForm.resetFields();
  }
  @Emit('refreshList')
  private refreshList() { }
  @Emit('close')
  private close() {
    this.refresh();
    this.clearForm();
  }
  private clearForm() {
    const addForm: any = this.$refs['form'];
    addForm.resetFields();
    const upload: any = this.$refs['upload_case_import'];
    upload.reset();
    this.queryModel = {
      result: '',
      type: '',
      subType: '',
      remark: '',
      recordFiledIds: '',
    }
  }
  private mounted() {
    this.customDataDict.map(v => {
      if (v.parentId == null) {
        this.type.push(v);
      }
    })
  }
  @Watch('caseRow')
  private onCaseRowChange() {
    this.clearForm();
  }

  private selectSubType(id) {
    this.subType = [];
    this.queryModel.subType = '';
    this.customDataDict.map(v => {
      if (v.parentId === id) {
        this.subType.push(v);
      }
    })
  }

  private commit() {
    const addForm: any = this.$refs['form'];
    addForm.validate((valid) => {
      if (!valid) {
        return;
      }
      if (this.fileList.length) {
        this.fileList.map((v) => {
          this.queryModel.recordFiledIds += v.response.id + ',';
        })
      }
      this.subType.map((v) => {
        if (this.queryModel.subType === v.id) {
          this.categoryName = v.name
        }
      })
      const param = {
        id: this.caseRow.id,
        caseAssistId: this.caseRow.id,
        categoryName: this.categoryName,
        dataPoolId: this.queryModel.subType || this.queryModel.type,
        surveyResults: this.queryModel.result,
        recordFiledIds: this.queryModel.recordFiledIds,
        description: this.queryModel.remark,
      }
      this.caseAssistAntiFraudSurveyCaseService
        .setAntiFraudCaseByCaseId(param).subscribe(
          (data) => {
            this.$message.success('设置成功')
            this.close();
            this.refreshList()
          },
      );
    });
  }

}
</script>

<style lang="less" scoped>
</style>
